import { defineComponent, PropType } from 'vue'

import SongListItem from './SongItem'

import styles from './style.module.scss'
import { ISonglist } from 'apis/types/business'

export default defineComponent({
  name: '',
  props: {
    data: {
      type: Array as PropType<ISonglist[]>,
      required: true,
    },
  },
  setup(props) {
    console.log('props', props.data)
    return () => {
      return (
        <>
          <div class={styles.root}>
            {props.data.map(
              ({ id, name, playCount, picUrl, coverImgUrl }, index) => (
                <SongListItem
                  key={id}
                  id={id}
                  name={name}
                  playCount={playCount}
                  picUrl={picUrl || coverImgUrl}
                />
              ),
            )}
          </div>
        </>
      )
    }
  },
})
